<template>
  <div class="calender-c">
    <el-calendar v-model="now">
      <template #date-cell="{data}">
        <p>{{data.day.substring(data.day.indexOf('-')+1)}}</p>
        <p v-show="filterExists(data.day)">
          <a :href="'/profile/myCourseDetail?d=' + data.day">今日有课，点击查看</a>
<!--          <div>
            <el-button
                @mouseover="(e) => (buttonRef = e.currentTarget)"
                @click="viewCourse"
            >今日有课，点击查看</el-button
            >
          </div>
          <el-tooltip
              ref="tooltipRef"
              :visible="courseVisible"
              :popper-options="{
      modifiers: [
        {
          name: 'computeStyles',
          options: {
            adaptive: false,
            enabled: false,
          },
        },
      ],
    }"
              :virtual-ref="buttonRef"
              virtual-triggering
              popper-class="singleton-tooltip"
          >
            <template #content>
              <span> Some content </span>
            </template>
          </el-tooltip>-->
        </p>
      </template>
    </el-calendar>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import storage from "@/utils/storage.ts";
import {getMyCourseSchedules} from "@/api/course.ts";
const dateVal = ref([])
const now = ref(new Date());

const courseVisible = ref(false);
const tooltipRef = ref(null);
const buttonRef = ref(null);
const user = ref({})

const filterExists = (day: string) => {
  console.log('filterExists', day);
  return dateVal.value.find(v=>v === day);
}

const viewCourse = () => {
  courseVisible.value = !courseVisible.value
}


onMounted(()=>{
  user.value = JSON.parse(storage.getItem("userInfo"))
  const now = new Date();
  const data = {
    yearMonth: now.getFullYear() + '-' + (now.getMonth() + 1),
    memberId: user.value.id,
  }
  getMyCourseSchedules(data).then(res => {
    dateVal.value = res.data;
  })
})
</script>

<style scoped>
  .calender-c {
    color: #222222;
  }
</style>